import React, {Component} from 'react';
import PropTypes from 'prop-types'

export default class AddItem extends Component {

    /*
      相当于：  AddItem.propTypes = {
                    addItem: PropTypes.func.isRequired
                }
    */
    static propTypes = {
        addItem: PropTypes.func.isRequired
    }

    state = {
        username: '',
        content: '',
    }

    add = () => {
        const {addItem} = this.props
        const username = this.state.username;
        const content = this.state.content;
        addItem({
            username: username, content: content
        })
        this.setState({
            username: '', content: ''
        })
    }

    handleUsrename = (event) => {
        const username = event.target.value
        // console.log(username)
        this.setState({username})
    }

    handleContent = (event) => {
        const content = event.target.value
        // console.log(content)
        this.setState({content})
    }

    render() {
        return (
            <div>
                <input type="text" value={this.state.username} onChange={this.handleUsrename} />
                <br/>
                <textarea value={this.state.content} onChange={this.handleContent}/>
                <br/>
                <button onClick={this.add} >评论</button>
            </div>
        )
    }


}
